<template>
    <div class="template" style="background-color: #9E3F78;">
        <div class="nav">
            <img :src="back" style="width: 28px;height: 28px;margin-left: 15px;" @click="router.back()"/>
            Puzzle
            <img :src="dowenLoad" style="width: 28px;height: 28px;margin-right: 15px;" @click="dowenLoadPic"/>
        </div>
        <div class="getPic" ref="getPic" :style="{backgroundColor: colorList[puzzleStyle.bgcolor]}">
            <img :src="puzzleStyle.bgImg" style="width: 100%;min-height: 100%;position: absolute;top: 0;left: 0;" v-if="puzzleStyle.bgImg"/>
            <div v-for="(item1, index1) in modelList[puzzleStyle.model]" :key="index1" class="block1">
                <div v-for="(item2, index2) in item1" :key="index2" class="block1">
                    <div v-if="item2 == 1" class="blockItem">
                        <img :src="puzzleStyle.baseImg" v-if="puzzleStyle.baseImg" style="width: 100%;min-height: 100%;"/>
                        <div style="position: relative;width: 100%;height: 100%;" @click="pushBaseImg(1)" v-else>
                            <img :src="add" style="width: 60%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" />
                        </div>
                    </div>
                </div>
            </div>
            <Vue3DraggableResizable
                  :initW="100"
                  :initH="100"
                  v-model:w="dialogPic.width"
                  v-model:h="dialogPic.height"
                  v-model:x="dialogPic.x"
                  v-model:y="dialogPic.y"
                  :minW="10"
                  :minH="40"
                  :draggable="true"
                  :resizable="true"
                  :parent="true"
                  :handles="['br']"
                  classNameHandle="my-handle"
                  classNameActive="my-active"
                  @activated="dialogActive = true"
                  @deactivated="dialogActive = false"
                  v-if="puzzleStyle.sticker != -1"
                  style="z-index: 999;"
                >
                  <div style="width: 100%;height: 100%;position: relative;">
                      <div class="closedialog" @click="() => {puzzleStyle.sticker = -1; dialogActive = false;}" v-show="dialogActive"></div>
                      <img :src="stickerList[puzzleStyle.sticker]" alt="Zoomable Image" :style="{width: dialogPic.width-5 +'px', height: dialogPic.height-5+'px'}" />
                  </div>
            </Vue3DraggableResizable>
            <Vue3DraggableResizable
                  :initW="150"
                  :initH="80"
                  v-model:w="textPic.width"
                  v-model:h="textPic.height"
                  v-model:x="textPic.x"
                  v-model:y="textPic.y"
                  :minW="10"
                  :minH="40"
                  :draggable="true"
                  :resizable="true"
                  :parent="true"
                  :handles="['br']"
                  classNameHandle="my-handle"
                  classNameActive="my-active"
                  @activated="textActive = true"
                  @deactivated="textActive = false"
                  v-if="puzzleStyle.text"
                  style="z-index: 999;"
                >
                  <div style="width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;">
                      <div class="closedialog" @click="() => {puzzleStyle.text = ''; textActive = false;}" v-show="textActive"></div>
                      <div class="textStyle" style="width: 100%;word-wrap: break-word;" :style="{color: puzzleStyle.textcolor == -1 ? '#000' : colorList[puzzleStyle.textcolor], fontFamily: familyList[puzzleStyle.textFamily]}">{{ puzzleStyle.text }}</div>
                    </div>
            </Vue3DraggableResizable>
        </div>
        <div class="Make">
            <div class="mean">
                <div class="item" @click="meanId = 0">
                    <img :src="model_active" v-if="meanId == 0" />
                    <img :src="model" v-else />
                </div>
                <div class="item" @click="chickMeanID(1)">
                    <img :src="photo_active" v-if="meanId == 1"/>
                    <img :src="photo" v-else />
                </div>
                <div class="item" @click="chickMeanID(2)">
                    <img :src="badge_active" v-if="meanId == 2"/>
                    <img :src="badge" v-else/>
                </div>
                <div class="item" @click="chickMeanID(3)">
                    <img :src="font_active" v-if="meanId == 3"/>
                    <img :src="font" v-else/>
                </div>

            </div>
            <div class="menItem">
                <div class="checkStyle" v-if="meanId == 0">
                    <div v-for="(item, index) in modelPicList" :key="index" class="block">
                        <img :src="item"  style="width: 70%;max-height: 100%;" @click="puzzleStyle.model = index"/>
                        <img :src="coins" style="position: absolute;top: 0;right: 0;width: 25px;" v-if="index > 1"/>
                    </div>
                </div>
                <div class="checkStyle" v-if="meanId == 1">
                    <div class="block" @click="pushBaseImg(0)">
                        <img :src="image_add" style="width: 50%;"/>
                    </div>
                    <div v-for="(item, index) in colorList" :key="index" class="block" :style="{backgroundColor: item}" @click="() => {puzzleStyle.bgImg = '';puzzleStyle.bgcolor = index;}"></div>
                </div>
                <div class="checkStyle" v-if="meanId == 2">
                    <div v-for="(item, index) in stickerList" :key="index" class="block">
                        <img :src="item"  style="width: 70%;max-height: 100%;" @click="checkSticker(index)"/>
                        <img :src="coins" style="position: absolute;top: 0;right: 0;width: 25px;" v-if="index > 1"/>

                    </div>
                </div>
                <div class="checkStyle" v-if="meanId == 3" style="flex-direction: column;justify-content: space-around;">
                    <div class="checkStyle" style="height: auto;">
                        <div v-for="(item, index) in colorList" :key="index" class="colorblock" :style="{backgroundColor: item}" @click="puzzleStyle.textcolor = index" />
                    </div>
                    <div class="checkStyle" style="height: auto;margin-top: 8px;">
                        <div v-for="(item, index) in familyList" :key="index" class="block fontblock" :style="{fontFamily: item}" @click="puzzleStyle.textFamily = index">Font</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="show" style="background-color: transparent;padding: 0;margin: 0;" :close-on-click-overlay="false">
       <div style="width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;">
            <van-field v-model="puzzleStyle.textdemo" placeholder="Please enter text" style="background-color: transparent;padding: 0 30px;" />
            <div class="Done" @click="popupClose">Done</div>
            <img :src="close" style="width: 25px;position: absolute;top: 90px;right: 40px;" @click="() => {show = false;puzzleStyle.textdemo = '';}"/>
       </div>

    </van-popup>
</template>
<script setup>
import html2canvas from "html2canvas";
import coins from '../assets/coins.png'
import back from '../assets/back.png'
import dowenLoad from '../assets/dowenLoad.png'
import add from '../assets/add.png'
import model from '../assets/model.png'
import model_active from '../assets/model_active.png'
import photo from '../assets/photo.png'
import photo_active from '../assets/photo_active.png'
import badge from '../assets/badge.png'
import badge_active from '../assets/badge_active.png'
import font from '../assets/font.png'
import font_active from '../assets/font_active.png'
import model1 from '../assets/model1.png'
import model2 from '../assets/model2.png'
import model3 from '../assets/model3.png'
import model4 from '../assets/model4.png'
import model5 from '../assets/model5.png'
import close from '../assets/close.png'
import image_add from '../assets/image-add.png'
const modelPicList = [model1, model2, model3, model4, model5]
const colorList = ['#FB3C04', '#FF9645', '#41AD99', '#69CCBA', '#3C56D1', '#A4C1D3', '#D5DBED', '#A5AED8']
const familyList = ['TitanOne-Regular', 'PassionOne-Regular', 'PatrickHand-Regular', 'poppinsbold', 'PollerOne']
import { modelList } from '../model';
import { stickerList } from '../sticker'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { showToast,showLoadingToast, closeToast, showConfirmDialog } from "vant";
const router = useRouter()
const show = ref(false)


const meanId = ref(0)
const puzzleStyle = ref({
    model: 0,
    baseImg : '',
    bgImg: '',
    bgcolor: -1,
    sticker: -1,
    textdemo: '',
    text: '',
    textcolor: -1,
    textFamily: 0
})

const pushBaseImg = (type) => {
    window['picture'] = (data)=>{
        if (type == 1) {
            puzzleStyle.value.baseImg = data
        }else {
            puzzleStyle.value.bgImg = data
        }
	}
	window['send'](`terms://photo?type=0`);
}


let dialogPic = ref({
    width: 200,
    height: 200,
    x: 0,
    y: 0,

})
let dialogActive = ref(false)
let textPic = ref({
    width: 400,
    height: 100,
    x: 20,
    y: 20
})
let textActive = ref(false)


const checkSticker = (index) => {
    // if (!puzzleStyle.value.baseImg) {
    //     showToast('Please upload pictures')
    //     return
    // }
    puzzleStyle.value.sticker = index
}
const isOne = ref(false)
const popupClose = () => {
    if (isOne.value) return
    isOne.value = true
    if (!puzzleStyle.value.textdemo) {
        showToast('Please enter text')
        isOne.value = false
        return
    }  
    show.value = false
    showLoadingToast({
        message: 'Loading...',
        forbidClick: true,
        duration: 0
    })
    setTimeout(() => {
        puzzleStyle.value.text = puzzleStyle.value.textdemo
        puzzleStyle.value.textdemo = ''
        closeToast()
    }, 500)

    isOne.value = false
}

const getPic = ref(null)
// const isSavePic = ref(false)
const dowenLoadPic = () => {
    // if (isSavePic.value) return
    // isSavePic.value = true
    if (!puzzleStyle.value.baseImg) {
        // isSavePic.value = false
        showToast('Please upload pictures')
        return
    }
    let type = puzzleStyle.value.model > 1 || puzzleStyle.value.sticker > 1
    let message = type ? 'You have used paid materials, and 10 gold coins will be deducted when saving the picture.' : 'Are you sure you want to save to photo album?'
    showConfirmDialog({
      message,
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    }).then(() => {
        save(type)
    })
}
const save = (type) => {
    if (type && coinsNum.value<10) {
        showToast('Not enough coins')
        return        
    }
    // showLoadingToast({
    //     message: 'Saving...',
    //     forbidClick: true,
    //     duration: 0
    // })
    setTimeout(() => {
        try {
            html2canvas(getPic.value).then((canvas) => {
        let imgData = canvas.toDataURL("image/jpeg"); // 转base64
        window['reducedCoins'] = (data) => {
	            if (data === "1") {
	            } else {
                    if (type) {
                        coinsNum.value = coinsNum.value - 10
                        localStorage.setItem('PuzzleEditCoinsNum', coinsNum.value)
                    }
                    // isSavePic.value = false
                    reSize()
	            }
                // closeToast()
	        }
	        window['album'](0, imgData);
        }); 
        } catch (error) {
            // isSavePic.value = false
        }

    }, 500)

}

const reSize = () => {
    dialogPic.value = {width: 200,height: 200,x: 0,y: 0}
    dialogActive.value = false
    textPic.value = {width: 400,height: 100,x: 20,y: 20}
    textActive.value = false
    meanId.value = 0
    puzzleStyle.value = {model: 0, baseImg : '', bgImg: '', bgcolor: -1, sticker: -1, textdemo: '', text: '', textcolor: -1, textFamily: 0 }
}

const coinsNum = ref(0)
onMounted(() => {
    coinsNum.value = localStorage.getItem('PuzzleEditCoinsNum') ? Number(localStorage.getItem('PuzzleEditCoinsNum')) : 0
})
const chickMeanID = (index) => {
    if (!puzzleStyle.value.baseImg) {
        showToast('Please upload pictures')
        return
    }
    if (index == 3) {
        show.value = true
    }
    meanId.value = index

}
</script>
<style scoped>
.getPic {
    width: 346px;
    height: 48.5vh;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}
.mean {
    width: 346px;
    height: 8vh;
    background: #FFFFFF;
    border-radius: 13px 13px 13px 13px;
    display: flex;
}
.menItem {
    margin-top: 15px;
    width: 346px;
    height: 22vh;
    background: #FFFFFF;
    border-radius: 13px 13px 13px 13px;
    padding: 20px;
    box-sizing: border-box;
}
.Make {
    position: fixed;
    bottom: 4vh;
    z-index: 9;
}
.getPic {
    display: flex;
    flex-direction: column;
    padding: 29px 20px;
    box-sizing: border-box;
}
.block1 {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.block2 {
    flex: 1;
}
.blockItem {
    width: 100%;
    height: 100%;
    background-color: #9E3F78;
    position: relative;
    overflow: hidden;
    display: flex;
}
.item {
    background: #FAA95D;
    border-radius: 13px 13px 13px 13px; 
    flex: 1;
    position: relative;
}
.item img {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.checkStyle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: auto;
}
.block {
    flex-shrink: 0;
    width: 115px;
    height: 115px;
    background: #F6E2EE;
    border-radius: 17px 17px 17px 17px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.colorblock {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 32px; 
    margin-right: 10px;
}
.fontblock {
    width: 69px;
    height: 69px;
    background: #F6E2EE;
    border-radius: 17px 17px 17px 17px;
    font-weight: 400;
    font-size: 20px;
    color: #9E3F78;
}
::v-deep(.my-handle){
    width: 20px !important;
    height: 20px !important;
    border-radius: 10px;
    background: url('../assets/sf.png') no-repeat center;
    background-size: 70%;
    background-color: #000;
}
::v-deep(.my-active) {
    border: 1px solid #000 !important;
}
::v-deep(.van-cell:after) {
    display: none;
}
.closedialog {
    display: block;
    width: 20px !important;
    height: 20px !important;
    position: absolute;
    top: -16px;
    left: -16px;
    border-radius: 10px;
    background: url('../assets/close.png') no-repeat center;
    background-size: 50%;
    background-color: #000;
}
:deep(.van-field__control::-webkit-input-placeholder){
    font-size: 14px;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
}
:deep(.van-field__control){
    font-size: 14px;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    background-color: transparent;
    border-radius: 0;
    border-bottom: 2px solid #FFFFFF !important;
}
::deep(.van-cell__value) {
    display: flex;
    justify-content: center;
}
.Done {
    width: 100px;
    height: 40px;
    background: #F6E2EE;
    border-radius: 17px 17px 17px 17px;
    font-weight: 600;
    font-size: 20px;
    color: #9E3F78;
    margin: 20px auto;
    text-align: center;
    line-height: 40px;
}
</style>
